<template>
    <div class="list">
      <div class="header">
        <router-link style="margin-right:1rem;color: black;" :to="{ name:'UserCenter'}">
          <van-icon name="arrow-left" size="1.3rem"/>
        </router-link>
        <h3>消息中心</h3>
      </div>

      <div class="banner">
        <img src="../assets/yh.png" alt="">
        <div>
          <h4>优惠促销</h4> 
          <p>海淘红榜，逛遍好世界</p>
        </div>
        <router-link class="youjian" :to="{ name:'UserCenter'}">
          <van-icon name="arrow" size="1.3rem"/>
        </router-link>
      </div>

      <div class="banner">
        <img src="../assets/xx.png" alt="">
        <div>
          <h4>站内消息</h4> 
          <p>点击查看最新的站内消息！</p>
        </div>
        <router-link class="youjian" :to="{ name:'UserCenter'}">
          <van-icon name="arrow" size="1.3rem"/>
        </router-link>
      </div>

      <div class="banner">
        <img src="../assets/zc.png" alt="">
        <div>
          <h4>我的资产</h4> 
          <p>点击查看最新的资产消息</p>
        </div>
        <router-link class="youjian" :to="{ name:'UserCenter'}">
          <van-icon name="arrow" size="1.3rem"/>
        </router-link>
      </div>

      <div class="banner">
        <img src="../assets/wl.png" alt="">
        <div>
          <h4>物流通知</h4> 
          <p>点击查看物流消息！</p>
        </div>
        <router-link class="youjian" :to="{ name:'UserCenter'}">
          <van-icon name="arrow" size="1.3rem"/>
        </router-link>
      </div>

      <div class="banner">
        <img src="../assets/yj.png" alt="">
        <div>
          <h4>意见反馈</h4> 
          <p>您的意见是我们前进的最大动力！</p>
        </div>
        <router-link class="youjian" :to="{ name:'UserCenter'}">
          <van-icon name="arrow" size="1.3rem"/>
        </router-link>
      </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
    *{
      margin: 0;padding: 0;
    }
    .header{
      width: 100%;
      height: 5rem;
      line-height:5rem;
      background-color: #fff;
    }
    .header .van-icon{
      margin: 1rem;
      color:black;
    }
    .header h3{
      float: right;
      margin-right:42%;
    }
    .banner{
      margin-top:0.5rem;
      height: 4rem;
      line-height:4rem;
      background-color:#fff;
      padding: 0.5rem 1rem;
    }
    .banner div{
      float: left;
      width: 50%;
      height:100%;
    }
    .banner img{
      float: left;
      margin: 0.5rem;
    }
    .banner h4{
      float: left;
      font-size: 0.8rem;
      height: 2rem;
      line-height: 2rem;
      width: 58%
    }
    .banner p{
      font-size: 0.7rem;
      float: left;
      height: 1.5rem;
      line-height: 1.5rem;
      width: 150%;
      
    }
    .youjian{
      color: black;
      float:right;

    }
</style>

